

.form-label {
  top: 0;
  left: 0;
  height: 100%;
  padding: .50rem 1.63rem;
  color: var(--slate-200);
  opacity: .4;
}
.form-input {
  display: block;
  width: 100%;
  padding: .375rem 1.5rem;
  font-weight: 400;
  background-clip: padding-box;
  color: var(--slate-200);
  border-radius: 1rem;
  background-color: var(--slate-800);
  outline: none;
  transition: border .5s ease-in-out;
}
.form-input:hover {
    border: 2px solid var(--slate-600);
}

.form-kbd {
    top: 0;
    right: 0;
    height: 100%;
    padding: .50rem 1.63rem;
    pointer-events: none;
    font-weight: 800;
    color: var(--slate-500);
    font-family: var(--bs-font-monospace);
    opacity: 1;
    transition: opacity .4s ease-in-out;
}
.form-input:focus ~ .form-kbd{
    opacity: 0;
}

